---
import { getCollection } from 'astro:content';
import config from '../../config.ts';

const options = { 
  year: 'numeric', 
  month: 'long', 
  day: 'numeric' 
};

const blog = (await getCollection('docs', ({ data, slug }) => {
  return slug.startsWith('blog/') && data.draft !== true;
})).sort(
  (a, b) => a.data.lastUpdated && b.data.lastUpdated
    ? b.data.lastUpdated.getTime() - a.data.lastUpdated.getTime()
    : 0
);
---

<ul class="posts">
  {blog.map(entry => (
    <li class="post">
      <h3><a href={`/${entry.slug}`}>{entry.data.title}</a></h3>
      <p class="description">{entry.data.description}</p>
      <div class="meta">
        <a target="_blank" href={config.authors[entry.data.author].twitter}>
          {config.authors[entry.data.author].name}
        </a>
        <span>
          { entry.data.lastUpdated
            ? entry.data.lastUpdated.toLocaleDateString('en-US', options)
            : "1971-01-01"
          }
        </span>
      </div>
    </li>
  ))}
</ul>

<style>
.posts {
  margin-top: calc(0.5 * var(--paragraph-spacing));
  list-style-type: none;
}
.posts > li.post {
  margin-top: 0;
  margin-bottom: calc(1.5 * var(--paragraph-spacing));
  padding: 0;
}
.posts > li.post:last-child {
  margin-bottom: 0;
}
.posts > li.post:before {
  content: none;
}
.post > p.description {
  margin-top: 0.375rem;
}
.posts > li.post > .meta {
  margin: 0.625rem 0 0;
  display: flex;
  gap: 1.125rem;
  align-items: center;
}
.meta a {
  color: var(--color-text-dimmed);
  font-size: var(--sl-text-sm);
}
.meta a:hover {
  color: var(--sl-color-text-accent);
  text-decoration: none;
}
.meta span {
  color: var(--color-text-dimmed);
  font-size: var(--sl-text-sm);
}
</style>
